import React, { PureComponent, Fragment } from 'react';
import {
  Form,
  Input,
  Modal,
  Row,
  Col,
  Select,
} from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;


@connect(({ Account, loading }) => ({
  Account,
}))
@Form.create()
class SelectBank extends PureComponent {
  constructor(props) {
    super(props);

    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  // 表单
  renderContent = () => {
    const { form, bankList = [] } = this.props;
    return [
      <FormItem key="bankCode" {...this.formLayout} label="银行名称">
        {form.getFieldDecorator('bankCode', {
          rules: [{ required: true, message: '请选择银行名称！' }],
        })(
          <Select placeholder="请选择开户银行名称" style={{width:'100%'}}>
            {bankList.map((item) => (
              <Select.Option value={item.bankNo} key={item.bankNo}>{item.bankName}</Select.Option>
            ))}
          </Select>,
        )}
      </FormItem>,
    ];
  };

  //弹窗
  render() {
    const { handleBankModalVisible, bankModalVisible } = this.props;
    //完成
    const handleNext = () => {
      const { form, values, handleSelectBank } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...values, ...fieldsValue };
        handleSelectBank(formVals);
      });
    };
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={'选择银行类型'}
        visible={bankModalVisible}
        onOk={handleNext}
        onCancel={() => handleBankModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default SelectBank;
